/*
 * @Description: 
 * @Author: paddies
 * @Date: 2023-06-17 23:25:19
 * @LastEditors: paddies
 * @LastEditTime: 2023-06-18 02:59:04
 * @FilePath: /box-app/lib/components/build-input-password/buildInputPassword.dart
 */
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

List<Map<String, dynamic>> keyWordList = [
  {"label": "1", "code": "1"},
  {"label": "2", "code": "2"},
  {"label": "3", "code": "3"},
  {"label": "4", "code": "4"},
  {"label": "5", "code": "5"},
  {"label": "6", "code": "6"},
  {"label": "7", "code": "7"},
  {"label": "8", "code": "8"},
  {"label": "9", "code": "9"},
  {"label": "", "code": "", "ignore": true},
  {"label": "0", "code": "0"},
  {"label": "-", "code": "del", "ignore": true},
];

var inputValue = ["", "", "", "", "", ""].obs;

handleInput(String value, Function? onSuccess) {
  if (value == "del") {
    for (var i = inputValue.value.length - 1; i >= 0; i--) {
      if (inputValue.value[i] != "") {
        inputValue[i] = "";
        return;
      }
    }
    return;
  }

  for (var i = 0; i < inputValue.value.length; i++) {
    if (inputValue.value[i] == "") {
      print("找到啦${i}");
      inputValue[i] = value;

      if (i == inputValue.length - 1) {
        print("输入完成啦");
        if (onSuccess != null) {
          print(inputValue.join(""));
          onSuccess(inputValue.value.join(""));
          Get.back();
        }
      }
      return;
    }
  }
}

buildInputPassword(
    {String price = "", String payType = "", Function? onSuccess}) {
  final double statusBottomHeight =
      MediaQuery.of(Get.overlayContext!).padding.bottom;
  Get.bottomSheet(
      isScrollControlled: true,
      // barrierColor: Colors.red,
      ignoreSafeArea: false,
      useRootNavigator: true,
      Container(
          width: double.infinity,
          // height: double.infinity,
          color: Colors.transparent,
          child: Column(
            children: [
              Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.center,
                    width: double.infinity,
                    height: double.infinity,
                    color: Colors.transparent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 300,
                          height: 270,
                          decoration: new BoxDecoration(
                            color: Colors.white,
                            borderRadius: new BorderRadius.all(
                                new Radius.circular(20.0)), //圆角
                          ),
                          child: Column(
                            children: [
                              Container(
                                width: double.infinity,
                                height: 45,
                                // color: Colors.red,
                                child: Stack(
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        Get.back();
                                      },
                                      child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Padding(
                                            padding: EdgeInsets.only(right: 20),
                                            child: Icon(Icons.clear_sharp),
                                          )),
                                    ),
                                    Align(
                                      child: Text(
                                        "请输入支付密码",
                                        style: TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                width: double.infinity,
                                height: 60,
                                // color: Colors.red,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(
                                      "¥",
                                      style: TextStyle(fontSize: 15),
                                    ),
                                    Text(
                                      price,
                                      style: TextStyle(
                                          fontSize: 24,
                                          fontWeight: FontWeight.bold),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                width: double.infinity,
                                height: 60,
                                // color: Colors.yellow,
                                padding: EdgeInsets.only(left: 20, right: 20),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(
                                      "付款方式",
                                      style: TextStyle(fontSize: 16),
                                    ),
                                    Text(
                                      payType,
                                      style: TextStyle(fontSize: 16),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                  width: double.infinity,
                                  height: 80,
                                  padding: EdgeInsets.only(left: 10, right: 10),
                                  // color: Colors.blue,
                                  child: Obx(
                                    () => Row(
                                        children: inputValue.map((e) {
                                      return Expanded(
                                          flex: 1,
                                          child: Container(
                                            width: double.infinity,
                                            height: double.infinity,
                                            // padding: EdgeInsets.all(10),
                                            alignment: Alignment.center,
                                            child: Container(
                                                width: 40,
                                                height: 40,
                                                alignment: Alignment.center,
                                                color: Color(0xffF2F2F2),
                                                child: Stack(
                                                  children: [
                                                    if (e.toString() != "")
                                                      Icon(
                                                        Icons
                                                            .brightness_1_rounded,
                                                        size: 16,
                                                      )
                                                    else
                                                      Text("")
                                                  ],
                                                )

                                                // Text(e.toString()),
                                                ),
                                          ));
                                    }).toList()),
                                  ))
                            ],
                          ),
                        )
                      ],
                    ),
                  )),
              Container(
                  width: double.infinity,
                  height: 250,
                  color: Color(0xffEFEFEF),
                  padding: EdgeInsets.only(top: 10),
                  child: Wrap(
                      spacing: 0, //主轴上子控件的间距
                      runSpacing: 0,
                      children: keyWordList.map((e) {
                        return GestureDetector(
                            onTap: () {
                              print("选择:${e['code']}");
                              handleInput(e['code'].toString(), onSuccess);
                            },
                            child: FractionallySizedBox(
                                widthFactor: 1 / 3,
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      left: 4, right: 4, bottom: 3, top: 3),
                                  child: Container(
                                      width: double.infinity,
                                      height: 50,
                                      color: e["ignore"] == true
                                          ? Colors.transparent
                                          : Colors.white,
                                      alignment: Alignment.center,
                                      child: Stack(
                                        children: [
                                          if (e["code"] == "del")
                                            Icon(Icons.backspace)
                                          else
                                            // Icon(Icons.brightness_1_rounded)
                                            Text(e["label"].toString()),
                                        ],
                                      )),
                                )));
                      }).toList())),
              Container(
                width: double.infinity,
                height: statusBottomHeight,
                color: Colors.transparent,
              )
            ],
          ))).then((value) {
    inputValue.value = ["", "", "", "", "", ""];
  });
}
